<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/menu1.css" />
		<title>练习02 实现菜单的收缩与扩展</title>
	</head>

	<body>
		<div id="leftNav" class="left-nav">
			<div id="myMenu" class="menuBox">
				<ul class="spMenuBox">
					<li class="spMenuItem active">
						<div class="spMenu" onclick="click1()">
							<i class="fa fa-folder-open"></i>
							<span>菜单1</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: block;">
							<li><span class="subMenu">菜单1.1</span></li>
							<li><span class="subMenu">菜单1.2</span></li>
							<li><span class="subMenu">菜单1.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onclick="click2()">
							<i class="fa fa-folder"></i>
							<span>菜单2</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onclick="click3()">
							<i class="fa fa-folder"></i>
							<span>菜单3</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onclick="click4()">
							<i class="fa fa-folder"></i>
							<span>菜单4</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单4.1</span></li>
							<li><span class="subMenu">菜单4.2</span></li>
							<li><span class="subMenu">菜单4.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onclick="click5()">
							<i class="fa fa-folder"></i>
							<span>菜单5</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
						</ul>
					</li>
				</ul>
			</div>
		
		</div>
	</body>
	<script>
		// 189000950 顾啟思
		//上下箭头
		let div1 = document.querySelectorAll(".spMenuItem");
		//文件夹样式
		let div3 = document.querySelectorAll(".spMenuItem>.spMenu>i");
		//二级菜单显示隐藏
		let div2 = document.querySelectorAll(".subMenuBox");
		//onclick点击
		let click1 = function(){
		if(div1[0].className == "spMenuItem active"){
			//改变上下箭头
			div1[0].className = "spMenuItem";
			//改变文件夹样式
			div3[0].className = "fa fa-folder";
			//改变二级菜单显示隐藏
			div2[0].style.display = "none";
		}
		else{
			//改变上下箭头
			div1[0].className = "spMenuItem active";
			//改变文件夹样式
			div3[0].className = "fa fa-folder-open";
			//改变二级菜单显示隐藏
			div2[0].style.display = "block";
		    }
		}
		//第二个
		let click2 = function(){
		if(div1[1].className == "spMenuItem active"){
			//改变上下箭头
			div1[1].className = "spMenuItem";
			//改变文件夹样式
			div3[2].className = "fa fa-folder";
			//改变二级菜单显示隐藏
			div2[1].style.display = "none";}
		else{
			//改变上下箭头
			div1[1].className = "spMenuItem active";
			//改变文件夹样式
			div3[2].className = "fa fa-folder-open";
			//改变二级菜单显示隐藏
			div2[1].style.display = "block";
		    }
		}
		//第三个
		let click3 = function(){
		if(div1[2].className == "spMenuItem active"){
			//改变上下箭头
			div1[2].className = "spMenuItem";
			//改变文件夹样式
			div3[4].className = "fa fa-folder";
			//改变二级菜单显示隐藏
			div2[2].style.display = "none";}
		else{
			//改变上下箭头
			div1[2].className = "spMenuItem active";
			//改变文件夹样式
			div3[4].className = "fa fa-folder-open";
			//改变二级菜单显示隐藏
			div2[2].style.display = "block";
		    }
		}
		//第四个
		let click4 = function(){
		if(div1[3].className == "spMenuItem active"){
			//改变上下箭头
			div1[3].className = "spMenuItem";
			//改变文件夹样式
			div3[6].className = "fa fa-folder";
			//改变二级菜单显示隐藏
			div2[3].style.display = "none";}
		else{
			//改变上下箭头
			div1[3].className = "spMenuItem active";
			//改变文件夹样式
			div3[6].className = "fa fa-folder-open";
			//改变二级菜单显示隐藏
			div2[3].style.display = "block";
		    }
		}
		//第五个
		let click5 = function(){
		if(div1[4].className == "spMenuItem active"){
			//改变上下箭头
			div1[4].className = "spMenuItem";
			//改变文件夹样式
			div3[8].className = "fa fa-folder";
			//改变二级菜单显示隐藏
			div2[4].style.display = "none";}
		else{
			//改变上下箭头
			div1[4].className = "spMenuItem active";
			//改变文件夹样式
			div3[8].className = "fa fa-folder-open";
			//改变二级菜单显示隐藏
			div2[4].style.display = "block";
		    }
		}
	</script>

</html>
